<template>
  <a-modal modal-class="add-keyword-relation-modal" :width="800" v-model:visible="visible" :footer="false">
    <a-row justify="center">
      <a-textarea
        auto-size
        v-model="keyword"
        style="height: 300px"
        placeholder="请输入关键词,多个关键词用#号隔开，一个关键词一篇文章"
        allow-clear
      />
      <div class="choose-modal" style="margin-top: 8px">
        <a-form-item style="width: min-content" field="status" label="选择模板">
          <a-select
            allow-search
            style="width: 200px"
            @dropdown-reach-bottom="getTemplateData()"
            :loading="loadingTemp"
            @search="handleSearch"
            v-model="chooseModal"
            placeholder="请选择类型"
            allow-clear
          >
            <a-option v-for="item in templateOption" :value="item.id">{{ item.name }}({{ item.type_text }})</a-option>
          </a-select>
          <icon-bar-chart style="cursor: pointer; margin-left: 8px" size="18" @click="() => chartModalRef.show()" />
          <a-popconfirm content="确定生成?" @ok="handleRelation">
            <a-button :disabled="!keyword || !chooseModal" style="margin-left: 12px" type="primary">
              <template #default>确认生成</template>
            </a-button>
          </a-popconfirm>
        </a-form-item>
      </div>
    </a-row>
    <chartModal :tabList="statusOption" ref="chartModalRef"></chartModal>
  </a-modal>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { Message, Modal, type FormInstance } from '@arco-design/web-vue'
import { IconEdit, IconPlus } from '@arco-design/web-vue/es/icon'
import { getTemplateList, relationKeywordsAudit } from '@/apis'
import chartModal from '@/views/template-management/chartModal.vue'

const chartModalRef = ref(null)
const keyword = ref('')
const chooseModal = ref('')

const emits = defineEmits(['reFreshTable'])

const visible = ref(false)
const detailId = ref('')

const templatepager = reactive({
  page: 1,
  pageSize: 100,
  total: 0
})
const templateOption = ref([])
const loadingTemp = ref(false)
// 获取模板下拉
const getTemplateData = async (query?: string) => {
  loadingTemp.value = true
  const res = await getTemplateList({
    status: 1,
    keyword: query || '',
    page: templatepager.page,
    pagesize: templatepager.pageSize
  }).then((res) => {
    if (res.code == 1) {
      if (res.data.data?.length > 0) {
        templateOption.value = templateOption.value.concat(res.data.data || [])
        templatepager.page++
      }
    } else {
    }
    loadingTemp.value = false
  })
}
getTemplateData()

// 搜索
const handleSearch = (val) => {
  templatepager.page = 1
  templateOption.value = []
  getTemplateData(val)
}

const show = (id: string) => {
  visible.value = true
}
const handleRelation = async () => {
  let res = await relationKeywordsAudit({
    template_id: chooseModal.value,
    type: 1,
    keywords: keyword.value
  })
  if (res.code == 1) {
    Message.success(res.msg || '关联成功')
    visible.value = false
  } else {
    Message.error(res.msg || '关联失败')
  }
}
defineExpose({ show })
</script>

<style lang="scss" scoped>
:deep(.arco-collapse-item-content) {
  background: none;
}
</style>
<style lang="scss">
.add-keyword-relation-modal {
  .arco-modal-header {
    border: none;
    display: flex;
    justify-content: flex-end;
    font-size: 18px;
    height: 32px;
  }
}
</style>
